<template>
  <div id="char01">
    <h1>{{ msg }}</h1>
    <div id="PieChart"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "饼图展示"
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById("PieChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "访问来源",
          subtext: "数据来自网络",
          left: "center"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" }
            ],
            roseType: "angle",

            itemStyle: {
              normal: {
                // color: "#c23531",
                shadowBlur: 200,
                shadowColor: "rgba(0, 0, 0, 0.2)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
#char01 {
  text-align: center;
}
#PieChart {
  width: 800px;
  height: 600px;
  margin: 0px auto;
  /* background-color: white; */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); */
}
</style>
